<!--头部版块-->
<app-page-header [pageHeaderInfo]="pageHeaderInfo"></app-page-header>

<div class="normal-table-wrap">
  <div nz-row [nzGutter]="[16,16]">
    <div nz-col [nzXl]="6" [nzXXl]="6" [nzLg]="6" [nzMd]="24" [nzSm]="24" [nzXs]="24">
      <app-dept-tree #deptTree (deptIdEven)="searchDeptIdUser($event)"></app-dept-tree>
    </div>
    <div nz-col [nzXl]="18" [nzXXl]="18" [nzLg]="18" [nzMd]="24" [nzSm]="24" [nzXs]="24">
      <nz-card nzHoverable [nzBodyStyle]="{'padding-bottom':0}" class="m-b-10">
        <form nz-form>
          <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24}">
            <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXs]="24">
              <nz-form-item>
                <nz-form-label [nzFor]="">用户名称</nz-form-label>
                <nz-form-control>
                  <input nz-input name="userName" [(ngModel)]="searchParam.userName" placeholder="请输入角色名称"/>
                </nz-form-control>
              </nz-form-item>
            </div>

            <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXs]="24">
              <nz-form-item>
                <nz-form-label [nzFor]="">手机</nz-form-label>
                <nz-form-control>
                  <input nz-input name="mobile" [(ngModel)]="searchParam.mobile" placeholder="请输入手机号"/>
                </nz-form-control>
              </nz-form-item>
            </div>

            <ng-container *ngIf="!isCollapse">
              <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXs]="24">
                <nz-form-item>
                  <nz-form-label [nzFor]="">是否启用</nz-form-label>
                  <nz-form-control>
                    <nz-select name="available" [(ngModel)]="searchParam.available" nzPlaceHolder="下拉选择" nzAllowClear>
                      <nz-option *ngFor="let item of availableOptions" [nzValue]="item.value"
                                 [nzLabel]="item.label"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" [nzSm]="0" [nzXs]="0">
                <nz-form-item>
                </nz-form-item>
              </div>
              <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" [nzSm]="0" [nzXs]="0">
                <nz-form-item>
                </nz-form-item>
              </div>
            </ng-container>

            <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXs]="24" class="text-right p-0 m-b-10">
              <button nz-button [nzType]="'primary'" (click)="getDataList()"><i nz-icon nzType="search"></i>搜索</button>
              <button nz-button class="m-l-15" (click)="resetForm();deptTree.resetTree()"><i nz-icon nzType="close-circle" nzTheme="outline"></i>重置
              </button>
              <a class="collapse operate-text" (click)="toggleCollapse()">
                <span *ngIf="isCollapse">展开</span>
                <span *ngIf="!isCollapse">收起</span>
                <i nz-icon [nzType]="isCollapse ? 'down' : 'up'"></i>
              </a>
            </div>
          </div>
        </form>
      </nz-card>

      <app-card-table-wrap [tableTitle]="'账号列表'" (reload)="reloadTable()" [btnTpl]="tableBtns">
        <app-ant-table (selectedChange)="selectedChecked($event)"
                       [checkedCashArrayFromComment]="checkedCashArray"
                       (changePageSize)="changePageSize($event)" (changePageNum)="getDataList($event)"
                       [tableConfig]="tableConfig" [tableData]="dataList"></app-ant-table>
        <ng-template #operationTpl let-id="id">
          <span *appAuth="ActionCode.AccountEdit" class="operate-text" (click)="edit(id)">编辑</span>
          <span *appAuth="ActionCode.AccountDel" class="operate-text" (click)="del(id)">删除</span>
        </ng-template>
      </app-card-table-wrap>
    </div>
  </div>

  <ng-template #tableBtns>
    <button *appAuth="ActionCode.AccountAdd" (click)="add()" nz-button nzType="primary" class="m-r-8"><i nz-icon
                                                                                                         nzType="plus"></i>新建
    </button>
    <button *appAuth="ActionCode.AccountDel" (click)="allDel()" nz-button nzType="default"><i nz-icon nzType="delete"></i>批量删除
    </button>

  </ng-template>

  <ng-template #availableFlag let-available="available" let-id="id">
    <nz-switch [nzControl]="true" [ngModel]="available" [nzDisabled]="true"
               nzCheckedChildren="启用"
               nzUnCheckedChildren="禁用"></nz-switch>
  </ng-template>

</div>
